<template>
  <view>
    <!-- 设置返回箭头 -->
    <navigator class="back" open-type="navigateBack" hover-class="none"
      >回</navigator
    >
    <!-- 详情页的轮播图 -->
    <swiper
      class="swiper"
      indicator-dots
      indicator-active-color="#eb4450"
      autoplay
    >
      <swiper-item
        class="goodsDetail_swiper"
        v-for="(item, index) in pics"
        :key="item.pics_id"
      >
        <!-- 点击查看大图： -->
        <image
          @tap="previewImageHandle(index)"
          class="goodsDetail_image"
          :src="item.pics_big_url"
          mode="aspectFit"
        />
      </swiper-item>
    </swiper>
    <!-- 商品信息 -->
    <view class="goods_info">
      <view class="info_head">
        <div class="price">{{ goods_price }}</div>
        <view class="opentype_botton_wrap iconfont icon-zhuanfa">
          <!-- 转发分享的按钮：透明度为0 -->
          <button class="opentype_botton" open-type="share">转发</button>
        </view>
        <view class="iconfont icon-shoucang1" @tap="collectHandle"></view>
      </view>
      <view class="goods_name">
        {{ goods_name }}
      </view>
    </view>
    <view class="divider"></view>
    <!-- 商品介绍：图文详情 -->
    <view class="goods_intrduce">
      <view class="intrduce_head">图文详情</view>
      <!-- 富文本相当于v-html -->
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>
    <!-- 底部固定栏 -->
    <view class="bottom">
      <view class="icon_item opentype_botton_wrap">
        <button class="opentype_botton" open-type="contact">联系客服</button>

        <view class="iconfont icon-kefu"></view>
        <view class="icon_item_text">联系客服</view>
      </view>
      <navigator
        class="icon_item"
        url="../cart/main"
        hover-class="none"
        open-type="switchTab"
      >
        <view class="iconfont icon-gouwuche"></view>
        <view class="icon_item_text">购物车</view>
      </navigator>
      <view class="button_item" @tap="addCarHandle">加入购物车</view>
      <view class="button_item">立即购买</view>
    </view>
  </view>
</template>

<script>
import { getGoodDetail } from "@/api";
export default {
  data() {
    return {
      goods_id: "",
      pics: [],
      goods_name: "",
      goods_price: "",
      goods_introduce: "",
      goods_small_logo: "",
    };
  },
  // 生命周期是用的小程序的：
  //   onLoad(goods_id) 这里应该是解构！！goods_id  所以要用花括号包裹起来！！
  onLoad({ goods_id }) {
    // 把带过来的id存到data里面：
    this.goods_id = goods_id;
    this.getGoodsDetailData();
  },
  methods: {
    async getGoodsDetailData() {
      const res = await getGoodDetail({ goods_id: this.goods_id });
      console.log(res.data.message);
      let {
        pics,
        goods_name,
        goods_price,
        goods_introduce,
        goods_small_logo,
      } = res.data.message;
      // 绑定数据：
      this.pics = pics;
      this.goods_name = goods_name;
      this.goods_price = goods_price;
      this.goods_small_logo = goods_small_logo;
      // 判断机型：
      const { system, model } = uni.getSystemInfoSync();
      console.log(system);
      console.log(model);
      // 先转小写，看是否包含ios
      const isIos = system.toLowerCase().includes("ios");
      console.log("isIos", isIos);
      // 如果是苹果系统就替换webp格式，安卓则不需要：
      if (isIos) {
        // 如果是苹果就替换，字符串的替换，不会改变字符串本身！！把它存起来！！ 存在内部！！
        goods_introduce = goods_introduce.replace(/\.webp/g, ".jpg");
      }
      // 给富文本标签添加类名：
      //因为富文本组件无法通过标签选择器操作标签，所以只能通过给标签添加类名，控制样式
      this.goods_introduce = goods_introduce.replace(
        /<img/g,
        '<img class="rich_img"'
      );
      // ios平台不支持webp格式，所以：
      // 所有webp结尾的图片，格式都要转成.jpg结尾的图片  一定要全局！！一定要加   g
    },
    previewImageHandle(current) {
      // const urls = this.pics.map((item) => item.pics_big_url);
      const urls = this.pics.map((item) => item.pics_big_url);
      // urls此数组规定里面的每一项，都必须是字符串
      // console.log(urls);
      uni.previewImage({
        current,
        urls,
      });
    },
    // 点击收藏按钮：
    collectHandle() {
      // 提示功能升级中：
      uni.showToast({
        title: "功能升级中……",
        duration: 1000,
        icon: "none",
      });
    },
    // 点击加入购物车：
    addCarHandle() {
      console.log("点击了加入购物车");
      // 设置一个空的购物车数组：
      // 先获取一下：是否有这个值？？还是为空？？

      const cartList = uni.getStorageSync("cartList") || [];
      const index = cartList.findIndex(
        (item) => item.goods_id === this.goods_id //必须是全等！！
      );

      // push进去的是对象！！！对象！！对象！！
      // cartList.push({
      //   goods_name=this.goods_name,
      //   goods_id=this.goods_id,
      //   goods_price=this.goods_price,
      //   goods_small_logo=this.goods_small_logo,
      //   goods_selected=this.goods_selected
      // })
      if (index === -1) {
        // 为-1 就是不存在的意思！！
        cartList.push({
          goods_name: this.goods_name,
          goods_id: this.goods_id,
          goods_price: this.goods_price,
          goods_small_logo: this.goods_small_logo,
          goods_selected: true,
          goods_count: 1,
        });
      } else {
        // 如果存在：cartList相应的index里的count ++
        cartList[index].goods_count++;
      }
      uni.setStorageSync("cartList", cartList);
      // 加入购物车成功后就弹窗：
      uni.showToast({
        title: "加入购物车",
        duration: 1000,
        mask: true, // 添加透明蒙层！！
      });
    },
  },
};
</script>

<style lang="less" >
.back {
  position: fixed;
  top: 60;
  left: 40;
  border-radius: 50%;
  z-index: 10;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper,
.goodsDetail_swiper,
.goodsDetail_image {
  width: 750rpx;
  height: 750rpx;
}
// 商品详情：
.goods_info {
  padding: 36rpx;
  .info_head {
    display: flex;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    .price {
      font-size: 36rpx;
      flex: 1;
    }
    .iconfont {
      font-size: 40rpx;
      color: #666;
      margin-left: 30rpx;
    }
  }
  .goods_name {
    margin-top: 15rpx;
    line-height: 1.5;
    font-size: 30rpx;
  }
}
.intrduce_head {
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rich_img {
  vertical-align: top;
}

// 底部固定栏：
.bottom {
  border-top: 1rpx solid #ddd;
  height: 96rpx;
  position: fixed;
  width: 750rpx;
  background-color: #fff;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  box-sizing: border-box; //十分重要！！
  .icon_item {
    // margin-left: 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .iconfont {
      font-size: 44rpx;
    }
    .icon_item_text {
      font-size: 20rpx;
    }
  }

  .button_item {
    // margin-left: 40rpx;   //不应该用button按钮！！他会有默认样式！！非常烦！！
    background-color: #fcaa23;
    width: 196rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    &:last-child {
      background-color: var(--mainColor);
    }
  }
}
</style>